<template>
  <div>
    <h2>v-bind 语法and用法</h2>
    <img src="imgsrc" alt="" />
    <img v-bind:src="imgsrc" alt="" />
    &nbsp;&nbsp;&nbsp;
    <img :src="imgsrc" alt="" />
    <img :src="imgsrc2" alt="" />
    <button @click="deal">展开与合并</button>
    <!-- :class='{样式名称:bool,样式名称:bool}:如果bool值为true,则添加前面的样式,如果为false则不添加' -->
    <div class="box" :class="{ collepse: flag }"></div>
    <div :class="['box2', { collepse: flag }]"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgsrc:
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg",
      imgsrc2:
        "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2343438173,3540329520&fm=26&gp=0.jpg",
      id: 10,
      flag: false,
      // box: "box",
    };
  },
  methods: {
    deal() {
      this.flag = !this.flag;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 200px;
  height: 100px;
  background-color: red;
  border-radius: 15%;
}
.box2 {
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 25%;
}
.collepse {
  width: 50px;
}
</style>
